<template>
<table class="table-border" border="1" cellpadding="1">
    <thead>
        <tr style="background-color: aqua;">
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in info">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
        </tr>
    </tbody>
</table>

<br>
<br>
<br>
<table class="table-border" border="1" cellpadding="1">
    <thead>
        <tr style="background-color: aqua;">
            <th>用户借款编号</th>
            <th>用户借款账号</th>
            <th>借款款项名称</th>
            <th>借款金额</th>
            <th>剩余还款本金</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in infos">
            <td>{{ item.id }}</td>
            <td>{{ item.uname }}</td>
            <td>{{ item.sname }}</td>
            <td>{{ item.smoney }}</td>
            <td>{{ item.emoney }}</td>
        </tr>
    </tbody>
</table>
<br>
<br>
<br>
<h1>{{ infors }}</h1>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const info=ref([
    {
name:"张大",
age:21
},
{
    name:"李尔",
    age:20
},
  {
    name:"刘珊",
    age:22
  }  ,
  {
    name:"钱嗣",
    age:25
  },
  {
    name:"赵武",
    age:24
  }
])

const infos=ref([
    {
        id:1,
        uname:"zhangsan",
        sname:"八维助学金",
        smoney:400,
        emoney:0
    },
    {
        id:2,
        uname:"zhangsang",
        sname:"八维助学金",
        smoney:10000,
        emoney:10000
    }
])

const infors="双向数据绑定演示"
</script>